<template>
    <el-row class="content-container">
      <el-col :span="8" class="content-left">
        <div class="btn-content">
          <el-button @click="handleCreate" :disabled="btnDisable" size="small" type="primary" v-waves icon="el-icon-plus">添加</el-button>
          <el-button @click="handleUpdate" :disabled="btnDisable" size="small" type="success" v-waves icon="el-icon-edit">编辑</el-button>
          <el-button @click="handleDelete" :disabled="btnDisable" size="small" type="danger" v-waves icon="el-icon-delete">删除</el-button>
        </div>
        <tree ref="mTree" :restPath="restPath" @getNodeData="getNodeData" />
      </el-col>
      <el-col :span="15" class="content-right">
        <info ref="mAddRef" :restPath="restPath" :btnType="btnType" :treeNode="treeNode" :baseMenu="baseMenu" @flushData="flushData" />
      </el-col>
    </el-row>
</template>

<script>
  import { deleteObj } from '@/api/common';
  import { deleteNodes } from '@/api/sys/menu/index';

  /* 工具 */
  import * as common from '@/utils/base/common';

  /* 组件 */
  import tree from './menu-tree'
  import info from './menu-info'

  export default {
    /* 菜单管理 */
    name: 'menu',
    data() {
      return {
        restPath: 'sys/menu',
        menuData: null,
        btnDisable: true,

        btnType: 'create',
        treeNode: null, // 树节点数据, 对应MenuTree
        baseMenu: null, // 菜单数据, 对应BaseMenu
      }
    },
    components: {
      tree,
      info,
    },
    methods: {

      // tree组件选取节点,调用父组件的方法
      getNodeData(menuData) {
        this.btnDisable = false
        this.btnType = 'search'
        this.menuData = menuData
        this.treeNode = menuData.treeNode
        this.baseMenu = menuData.baseMenu
      },

      // 刷新数据
      flushData() {
        this.$refs.mTree.getAllMenuTree() // 重新获取tree
      },

      // 点击 添加
      handleCreate() {
        this.btnType = 'create';
        this.baseMenu = null // 清空菜单数据
      },
      // 点击 修改
      handleUpdate() {
        this.btnType = 'update'
        this.baseMenu = this.menuData.baseMenu
      },

      // 点击 删除
      handleDelete() {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(this.treeNode.children != null && this.treeNode.children.length > 0) {
            this.$confirm('当前节点有子节点, 是否一起删除?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              deleteNodes(this.treeNode).then(response => {
                this.handleRes(response)
              }).catch(err => {
                common.message(this, 'error', 2, '删除数据失败!')
                console.error(err)
              })
            }).catch(() => {});
          } else {
            deleteObj(this.restPath, this.treeNode.id).then(response => {
              this.handleRes(response)
            }).catch(err => {
              common.message(this, 'error', 2, '删除数据失败!')
              console.error(err)
            })
          }

        }).catch(() => {});
      },

      // 处理结果
      handleRes(response) {
        if(response.code === 200) {
          common.message(this, 'success', 2, '删除数据成功!')
          this.$refs.mTree.getAllMenuTree() // 重新获取tree

          this.btnType = 'create'
          this.$refs.mAddRef.initData()

        } else {
          common.message(this, 'warning', 2, response.message)
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/styles/tree-list.css";

  .btn-content {}
</style>
